<template>
  <div class="Jurisdiction common">
    <div class="Jurisdiction-content">
      <!-- 搜索栏 -->
      <div class="search-group">
        <!-- <el-select class="ml20" v-model="searchVal.department" placeholder="部门">
          <el-option
            v-for="item in checkDepartOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select> -->
        <el-input
          class="wid-15 mr10 ml10"
          placeholder="岗位"
          v-model="searchVal.jobs"
          clearable
        >
        </el-input>
        <el-date-picker
          class="wid-25 ml10 mt10"
          v-model="searchVal.search_date"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      <el-button class="new-btn ml10" size="small"
        @click="getAllJobs"
        >查询
      </el-button>

      <el-button
        v-if="
            power_user && power_user.indexOf('api.user_user_resource_POST') > 0
          "
        class="fr new-btn mr10"
        icon="el-icon-plus"
        @click="showNewAddDialog"
        size="small" >新建</el-button>
      </div>

      <!-- 表格栏 -->
      <el-table :height="userAgent ? '' : '550'" :data="tableData" class="mt20" v-loading="loading">
        <el-table-column type="index" label="序号" align="center" width="100px">
        </el-table-column>
        <el-table-column prop="name" label="岗位" align="center">
        </el-table-column>
        <el-table-column prop="create_time" label="添加日期" align="center">
        </el-table-column>
        <el-table-column
          width="300"
          prop="jurisdiction"
          label="操作"
          align="center"
          v-if="userInfo.items[0].role.indexOf('管理员') >= 0"
        >
          <template slot-scope="scope">
            <div>
              <el-button
                type="primary"
                plain
                size="small"
                @click="editTableRow(scope.row)"
                >编辑</el-button
              >
               <el-button
                type="danger"
                plain
                size="small"
                @click="deleteTableRow(scope.row)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="block tac mt20" v-if="total!==0">
        <el-pagination
          layout="total, prev, pager, next"
          @current-change="pageChange"
          :total="total"
          :page-size = "per_page"
        >
        </el-pagination>
      </div>

      <!-- 新建岗位与编辑通用弹窗 -->
    <el-dialog :modal-append-to-body="false" :top="userAgent ? '60px' : '15vh'" :title="editRole?'新建岗位':'编辑'"
      :visible.sync="dialogVisible"
      width="700px"
      center>
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="岗位名称："  label-width="120px">
          <el-input class="w300" v-model="form.jobname"></el-input>
        </el-form-item>
        <!-- <el-form-item label="选择权限："  label-width="120px">
          <div class="block border" v-if="checkListOptions.length!==0" key="1">
            <div class="block" v-for="(items,key, index) in checkListOptions" :key ="index">
              <h4>{{key}}</h4>
              <el-checkbox-group v-model="form.checkList">
                <el-checkbox v-for="item in items" :label="item.id" :key="item.id">
                  {{item.desc}}
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
          <div class="block border" v-else key="1">
            暂无权限可选择
          </div>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button v-if="editRole" type="primary" @click="createJob">确 定</el-button>
        <el-button v-else type="primary" @click="editJob">确 定</el-button>
      </span>
    </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  name: "jobmanage",
  data() {
    return {
      loading: false,
      searchVal: {
        department: '',
        search_date:[],
        jobs:''
      },
      tableData: [],
      editRole: true,//true表示是新建岗位弹窗,false是表示编辑弹窗
      //分页
      total: 2,
      page: 1,
      per_page: 10,
      dialogVisible: false,
      checkListOptions:{},
      checkDepartOptions:[],
      form: {
        jobname: '',
        id: ''
      }
    }
  },
  methods: {
    pageChange(r) {
      this.page = r
      this.getAllJobs();
    },
    showNewAddDialog (){
      this.editRole = true;
      this.dialogVisible = true;
      this.form={
        jobname: ''
      }
    },
    //编辑
    editTableRow(row) {
      this.dialogVisible = true;
      this.editRole = false;
      this.form={
        jobname: row.name,
        id: row.id
      }
    },
    // 获取所有职称
    getAllJobs() {
      this.loading = true;
      this.$api.getAllJobsTitle({
        params: {
        create_time_start:this.searchVal.search_date?this.searchVal.search_date[0]:'',
        create_time_end:this.searchVal.search_date?this.searchVal.search_date[1]:'',
        department_id: this.searchVal.department,
        name: this.searchVal.jobs,
        page: this.page
      }}).then(res => {
        this.loading = false;
        this.total = res.total;
        this.tableData = res.items
      })
      .catch(err => {
        console.log(err)
      })
    },
    //新建岗位
    createJob() {
      // 岗位名称和部门名字不能为空,权限数组可以为空
      if(!this.form.jobname){
        this.$notify({
          title: '警告',
          message: '请确保填完了创建信息哦',
          type: 'warning'
        });
        return false;
      }
      this.loading = true;
      this.$confirm('您确定要创建么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.createJobTitle({
          name: this.form.jobname
        }).then(res =>{
          this.loading = false;
          this.dialogVisible = false;
          if(res.err_no===0){
            this.$notify({
              title: '提示',
              message:'新建成功',
              type: 'success'
            });
            this.getAllJobs();
          }else{
            this.$notify({
              title: '警告',
              message: res.errmsg,
              type: 'warning'
            });
          }
        })
        .catch(() => {})
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //编辑岗位
    editJob() {
      // 岗位名称和部门名字不能为空,权限数组可以为空
      if(!this.form.jobname){
        this.$notify({
          title: '警告',
          message: '请确保填完了信息哦',
          type: 'warning'
        });
        return false;
      }
      this.loading = true;
      this.$api.editJobTitle({
        name: this.form.jobname,
        id:this.form.id
      }).then(res =>{
        this.loading = false;
        this.dialogVisible = false;
        if(res.err_no===0){
          this.$notify({
            title: '成功',
            message:'修改成功',
            type: 'success'
          });
          this.getAllJobs();
        }else{
          this.$notify({
            title: '警告',
            message: res.errmsg,
            type: 'warning'
          });
        }
      })
      .catch(() => {})
    },
    // 删除岗位
    deleteJob(id){
      this.$api.deleteJobTitle({
        data:{id:id}
      }).then(res=>{
        if(res.err_no===0){
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getAllJobs();
        }
      })
      .catch(()=>{})
    },
    // 删除table确认框
    deleteTableRow(row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteJob(row.id)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
      });
    },
    // 获取权限
    getAllPrivilege() {
      this.$api.getAllPrivilege().then(res => {
        this.checkListOptions = res
      })
      .catch(() =>{})
    },
    // 获取所有部门
    getAllGroups() {
      this.$api.getDepartmentList().then(res => {
        this.checkDepartOptions = res.items
      })
      .catch(() =>{})
    }
  },
  created() {
    this.getAllJobs();
    this.getAllPrivilege();
    this.getAllGroups();
  }
};
</script>
<style lang="stylus" scoped>
.w300
  width 300px
.border
  border 1px solid #dcdfe6
  padding 10px
  border-radius 4px
</style>

